<template>
<nav>
 <div id="header">
        <img src="@/assets/images/2.png" alt=""> <p>个人中心</p></div>
     <el-button type="success" plain id="btn" @click="$router.push('/')" >返回首页</el-button>
    <hr>
</nav>
<div style="background-color: white">

  <el-container style="height: 800px; border: 1px solid #eee;">

    <el-aside width="200px" style="margin-top: 1%" >
      <div style="width: 190px;background-color: white;padding: 5px;margin: auto">
        <img  v-bind:src="user.userpic" width="150" height="150" style="border-radius: 300px;margin-left: 8%;border:1px solid black;">
        <br>
        <br>
        <p style="margin:0 auto;text-align: center" >{{user.username}}</p>
      </div>
      <br>
      <br>
      <el-menu :default-openeds="['1','2']">
          <el-menu-item-group>
            <router-link class="alink" to="/person/bokelist"><el-menu-item index="1-1">个人信息</el-menu-item></router-link>
            <router-link class="alink" to="/person/changeinfo"><el-menu-item index="1-2">头像修改</el-menu-item></router-link>
            <router-link class="alink" to="/person/changemsg"><el-menu-item index="1-4">信息修改</el-menu-item></router-link>
            <router-link class="alink" to="/person/myinfo"><el-menu-item index="1-3">通知中心</el-menu-item></router-link>
            <router-link class="alink" to="/person/spaceinfo"><el-menu-item index="1-5">账号管理</el-menu-item></router-link>
            <router-link class="alink" to="/"><el-menu-item index="1-6" @click="exit">退出登录</el-menu-item></router-link>
          </el-menu-item-group>
      </el-menu>
    </el-aside>

    <el-container style="background-color: white">
      <el-main>
        <router-view/>
      </el-main>
    </el-container>
  </el-container>
</div>
</template>

<script>
// import { useRouter } from 'vue-router'
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'Space',
  beforeRouteEnter: (to, from, next) => {
    console.log('准备进入个人信息页')
    const islogin = localStorage.getItem('token')
    if (!islogin) {
      next({ path: '/login' })
    }
    next()
  },
  data () {
    return {
      user: {
        userpic: 'static/img/tx.png',
        username: 'admin'
      }
    }
  },

  setup () {
    // const router = useRouter()
    function exit () {
      window.localStorage.removeItem('token')
    }
    return {
      exit
    }
  }

}
</script>

<style scoped>
#header>p{
    font-size: 35px;
    font-weight: bolder;
    color: #b0b436;
    position: absolute;
    margin-left: 100px;
    margin-top: -60px;
    }
   nav{
        background-color:black;
    }
    #header>img{
        margin-left: 10px;
        margin-top: 10px;
    }
hr{
    height: 4px;
    background-color:#b0b436;
    /* margin-top: 50px; */
}
#btn{
    float: right;
    margin-top: -40px;
    margin-right: 20px;
}
.el-header {
  background-color: #B3C0D1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
  margin-left: 20px;
}
.alink{
  text-decoration: none;
}
</style>
